<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="大学生就业实训,品质就业,职业规划,IT行业人才基地"/>
    <title>蜗牛书城(woniuxy.com)-正品低价、品质保障、配送及时、轻松购物！</title>

    <!-- 引入Bootstrap核心样式文件 -->
    <link href="bootstrap-3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入jQuery核心js文件 -->
    <script src="javascript/jQuery-1.12.4.js"></script>
    <!-- 引入BootStrap核心js文件 -->
    <script src="bootstrap-3.4.1/js/bootstrap.min.js"></script>


    <link rel="shortcut icon" href="../static/favicon.ico" type="image/x-icon"/>
    <link href="css/common.css" rel="stylesheet"/>
    <link href="css/top.css" rel="stylesheet"/>
    <link href="css/foot.css" rel="stylesheet"/>

    <link href="css/cart.css" rel="stylesheet"/>

    <script src="javascript/cart.js"></script>

    <!-- 引入axios的包 -->
    <script src="/javascript/axios-min.js"></script>
    <!-- 引入vue的包 -->
    <script src="/javascript/vue-2.7.14.js"></script>

</head>

<body>
<!-- ==============  引入顶部的碎片  ===============  -->
<div th:replace="~{commons::top}"></div>


<!-- ==================== 购物车 ==================== -->
<div class="container no-padding book-detail-bg">
</div>

<div class="index mt50">
    <div class="container no-padding">
        <span class="cart-name">我的购物车</span>
    </div>
</div>


<div id="app">


    <div class="container no-padding">
        <table class="table mt10">
            <tr>
                <td>
                    <div class="checkbox">
                        <label>
                            <input class="all" type="checkbox"> 全选
                        </label>
                    </div>
                </td>
                <td>
                    <div class="checkbox">
                        书籍封面
                    </div>
                </td>
                <td>
                    <div class="checkbox">
                        书籍名称
                    </div>
                </td>
                <td>
                    <div class="checkbox">
                        单价
                    </div>
                </td>
                <td>
                    <div class="checkbox">
                        数量
                    </div>
                </td>
                <td>
                    <div class="checkbox">
                        小计
                    </div>
                </td>
                <td>
                    <div class="checkbox">
                        操作
                    </div>
                </td>
            </tr>

            <tr v-for="cart in cartList">
                <td> <input class="goods" type="checkbox" id="goodId" :value="cart.id"> </td>
                <td> <img :src="'http://localhost:90'+cart.bookImg" /> </td>
                <td> {{cart.bookName}} </td>
                <td class="price"> {{cart.bookPrice}} </td>
                <td>
                    <div class="input-group">
                        <span class="input-group-addon glyphicon glyphicon-minus"></span>
                        <input type="text" class="form-control buy-count" maxlength="3" :value="cart.buyCount">
                        <span class="input-group-addon glyphicon glyphicon-plus"></span>
                    </div>
                </td>
                <td class="total-price"> {{cart.bookPrice*cart.buyCount}} </td>
                <td> <a class="btn btn-danger remove">删除</a> </td>
            </tr>


            <tr id="last-tr">
                <td colspan="7" class="no-padding">

                    <a href="#">继续购物</a>
                    |
                    已选择 <span class="choic-num">0</span> 件
                    |
                    <a href="#">删除所选项</a>

                    <a href="#" class="buy btn btn-danger fr ml10" @click="addOrder">
                        下单
                    </a>
                    <span class="fr ">合计 : <i class="total">0</i> 元</span>
                </td>
            </tr>
        </table>
    </div>
</div>

<script>
    let vue = new Vue({
        el: "#app",
        data(){
            return {
                cartList: [],
                choiceNum: 0,
                total: ""
            }
        },
        methods: {
            addOrder(){
                console.log("订单金额："+vue.total);
            }


        }
        ,
        created: function (){
            axios.get('/cart/searchByUserId')
                .then(function (response) {
                    console.log(response.data.data);
                    vue.cartList = response.data.data;
                }).catch(function (error) {
                console.log(error);
            });
        }
    })




</script>




<!-- ==============  引入顶部的碎片  ===============  -->
<div th:replace="~{commons::#footer}"></div>


</body>

</html>
